<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title></title>
<script type="text/javascript" src="../../../js/selfjs/echarts.min.js"></script>
<link rel="stylesheet" href="../../../js/layui/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="../../../js/selfcss/main.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/selfcss/demo.css" />
<script type="text/javascript" src="../../../js/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="../../../js/easyui/jquery.easyui.min.js"></script>
</head>

<body>
	<div class="layui-field-box" style="width: 90%; height: 50px;">
		<select id="applicationId" class="easyui-combogrid"
			style="width: 150px; float: right;"
			data-options="
                    panelWidth: 500,
                    idField: 'id',
                    textField: 'applicationName',
                    url: '../../../searchIndexSystemApplications',
                    method: 'get',
                    columns: [[
                        {field:'applicationName',title:'应用名称',width:80},
                        {field:'applicationHost',title:'应用主机',width:100},
                        {field:'applicationPort',title:'应用端口',width:100,align:'right'}
                    ]],
                    fitColumns: true,
                    pagination:true,
                    labelPosition: 'top'
                "
			name="applicationId">
		</select>
	</div>
	<fieldset class="layui-elem-field">
		<legend>CPU 监控</legend>
		<div class="layui-field-box" style="width: 90%; height: 200px;"
			id="cpu"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>JVM内存监控</legend>
		<div class="layui-field-box" style="width: 90%; height: 200px;"
			id="jvmheap"></div>
		<div class="layui-field-box" style="width: 90%; height: 200px;"
			id="jvminfo"></div>
		<div class="layui-field-box" style="width: 90%; height: 80px;"
			id="jvmGarbage">
			<table id="tablelist1" class="easyui-datagrid" style="width: auto;"
				fitcolumns="true" fit="true"
				data-options="pagination:false,method:'get'">
				<thead>
					<tr>
						<th
							data-options="field:'youngCollectionCount',width:80,align:'center'">年轻代回收次数</th>
						<th
							data-options="field:'youngCollectionTime',width:100,align:'center'">年轻代回收时间(ms)</th>
						<th
							data-options="field:'oldCollectionCount',width:100,align:'center'">老年代回收次数</th>
						<th
							data-options="field:'oldCollectionTime',width:100,align:'center'">老年代回收时间(ms)</th>
					</tr>
				</thead>
			</table>
		</div>
	</fieldset>

	<fieldset class="layui-elem-field">
		<legend>JVM线程监控</legend>
		<div class="layui-field-box" style="width: 90%; height: 200px;"
			id="jvmThread"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>JVM CassLoader监控</legend>
		<div class="layui-field-box" style="width: 90%; height: 200px;"
			id="jvmCassLoader"></div>
	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>TOMCAT监控</legend>
		<div class="layui-field-box"
			style="width: 90%; height: 200px; float: left" id="thread"></div>

	</fieldset>
	<fieldset class="layui-elem-field">
		<legend>QUARTZ 监控</legend>
		<div class="layui-field-box"
			style="width: 90%; height: 200px; float: left" id="zookeeper">
			<table id="tablelist" class="easyui-datagrid" style="width: auto;"
				fitcolumns="true" fit="true"
				data-options="pagination:false,method:'get'">
				<thead>
					<tr>
						<th
							data-options="field:'schedulerInstanceId',width:80,align:'center'">schedulerInstanceId</th>
						<th data-options="field:'schedulerName',width:100,align:'center'">schedulerName</th>
						<th
							data-options="field:'threadPoolClassName',width:100,align:'center'">threadPoolClassName</th>
						<th data-options="field:'threadPoolSize',width:100,align:'center'">threadPoolSize</th>
						<th data-options="field:'statusName',width:100,align:'center'">statusName</th>
						<th data-options="field:'version',width:150,align:'center'">version</th>
					</tr>
				</thead>
			</table>
		</div>
	</fieldset>
	<script type="text/javascript">
		var threadChart = echarts.init(document.getElementById('thread'));
		var jvmthreadChart = echarts.init(document.getElementById('jvmThread'));
		var jvmCassLoaderChart = echarts.init(document
				.getElementById('jvmCassLoader'));
		var cpuChart = echarts.init(document.getElementById('cpu'));
		var jvmheapChart = echarts.init(document.getElementById('jvmheap'));
		var jvminfoChart = echarts.init(document.getElementById('jvminfo'))
		// 使用刚指定的配置项和数据显示图表。
		function setData() {
			var applicationId = $('#applicationId').combogrid('getValue');
			if (applicationId) {
				var url = "../../../" + applicationId + "/searchEChartsObject"
				$.getJSON(url, function(data) {
					if (data) {
						threadChart.setOption(data.tomcatThreadOption, true);
						jvmthreadChart.setOption(data.jvmThreadOption, true);
						jvmCassLoaderChart.setOption(data.jvmClassLoaderOption,
								true);
						jvmheapChart.setOption(data.jvmUsedOption, true);
						jvminfoChart.setOption(data.jvmInfoOption, true);
						cpuChart.setOption(data.cpuUsedOption, true);
						$('#tablelist').datagrid({
							data : data.quartzRuntimeDataGridObject
						});
						$('#tablelist1').datagrid({
							data : data.heapMemroryGarbageObject
						});
					}
				});
			}

		}
		window.onload = function() {
			setInterval(setData, 5000);
		}
	</script>
</body>

</html>